<template>
  <div>
    <div class="spanSty">
      <span>国家基本公共卫生服务项目脑卒中患者随访记录表</span>
    </div>
    <el-form :model="form" label-width="140px" label-position="left">
      <el-divider content-position="left">编号</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="form.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="填表日期">
            <el-date-picker
              v-model="form.followDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="随访方式">
            <el-select v-model="form.monthAge" style="width: 100%">
              <el-option
                v-for="item in monthAge"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>






      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="个人病史">
            <el-select v-model="form.personal" style="width: 100%" multiple>
              <el-option
                v-for="item in personal"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="脑卒中位置">
            <el-select v-model="form.location" style="width: 100%">
              <el-option
                v-for="item in location"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>








      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">

          <el-form-item label="脑卒中类型">
            <el-select v-model="form.StrokeType" style="width: 100%">
              <el-option
                v-for="item in StrokeType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="症状">
            <el-select v-model="form.kindergarten" style="width: 100%" multiple @change="seChangekindergarten">
              <el-option
                v-for="item in kindergarten"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="其他" v-if="showKindergarten">
          <el-input v-model="form.kindergartenContent"></el-input>
          </el-form-item>

        </el-col>
      </el-row>



















      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="并发症">
            <el-select v-model="form.coronaryType" style="width: 100%" multiple  @change="seChangecoronaryType">
              <el-option
                v-for="item in coronaryType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="其他" v-if="showCoronaryType">
            <el-input v-model="form.coronaryTypeContent" ></el-input>
          </el-form-item>
        </el-col>





      </el-row>

































      <el-divider content-position="left">体征</el-divider>
      <el-row :gutter="20" style="">

        <el-col :lg="12" :xl="12">
          <el-form-item label="血压(mmHg)">
          <el-row>
            <el-col :lg="5" :xl="5">收缩压</el-col>
            <el-col :lg="5" :xl="5">
              <el-input v-model="form.teething"></el-input>
            </el-col>
            <el-col :lg="3" :xl="3" style="margin-left: 30px">舒张压</el-col>

            <el-col :lg="5" :xl="5">
              <el-input v-model="form.decayed"></el-input>
            </el-col>
          </el-row>
          </el-form-item>

        </el-col>


        <el-col :lg="12" :xl="12">
          <el-form-item label="身高(cm)">
              <el-input v-model="form.stature"></el-input>
          </el-form-item>

        </el-col>

      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="体重(kg)">
            <el-input v-model="form.weight"></el-input>
          </el-form-item>

        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="体重目标(kg)">
            <el-input v-model="form.weightTarget"></el-input>
          </el-form-item>



        </el-col>

      </el-row>





      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="腰围">
            <el-input v-model="form.waistline"></el-input>
          </el-form-item>

        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="体质指数">
            <el-input v-model="form.bodyFat"></el-input>
          </el-form-item>

        </el-col>

      </el-row>







      <el-row :gutter="20">



        <el-col :lg="12" :xl="12">
          <el-form-item label="体质指数目标">
            <el-input v-model="form.bodyFatTarget"></el-input>
          </el-form-item>

        </el-col>




        <el-col :lg="12" :xl="12">
          <el-form-item label="空腹血糖值">
            <el-input v-model="form.limosis"></el-input>
          </el-form-item>

        </el-col>


      </el-row>



















      <el-row :gutter="20">


        <el-col :lg="12" :xl="12">
          <el-form-item label="其他">
            <el-input v-model="form.rest"></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="辅助检查*">
            <el-input v-model="form.auxiliary"></el-input>
          </el-form-item>

        </el-col>

      </el-row>














      <el-divider content-position="left">生活方式指导</el-divider>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="日吸烟量(支)">
            <el-input v-model="form.caloric"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="日吸烟量目标(支)" >
            <el-input v-model="form.caloricTarget"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="日饮酒量(两)" >
            <el-input v-model="form.capacity"></el-input>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="日饮酒量目标(两)" >
            <el-input v-model="form.capacityTarget"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :lg="12" :xl="12">
          <el-form-item label="运动">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.sportsHebdomad"></el-input>
              </el-col>
              <el-col :lg="5" :xl="5" style="margin-left: 30px">次/每周</el-col>


              <el-col :lg="6" :xl="6">
                <el-input v-model="form.sportsMinute"></el-input>
              </el-col>
              <el-col :lg="3" :xl="3" style="margin-left: 30px">分钟/次</el-col>

            </el-row>
          </el-form-item>

        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="运动目标">
            <el-row>
              <el-col :lg="6" :xl="6">
                <el-input v-model="form.sportsHebdomadTarget"></el-input>
              </el-col>
              <el-col :lg="5" :xl="5" style="margin-left: 30px">次/每周</el-col>


              <el-col :lg="6" :xl="6">
                <el-input v-model="form.sportsMinuteTarget"></el-input>
              </el-col>
              <el-col :lg="3" :xl="3" style="margin-left: 30px">分钟/次</el-col>

            </el-row>
          </el-form-item>

        </el-col>
      </el-row>






      <el-row :gutter="20">


        <el-col :lg="12" :xl="12">
          <el-form-item label="生活自理能力">

            <el-select v-model="form.selfCare" style="width: 100%">
              <el-option
                v-for="item in selfCare"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="服药依从性">

            <el-select v-model="form.medication" style="width: 100%">
              <el-option
                v-for="item in medication"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>


      </el-row>












      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="药物不良反应">
            <el-select v-model="form.adverse" style="width: 100%">
              <el-option
                v-for="item in adverse"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="药物不良反应" v-if="[2].includes(form.adverse)">
            <el-input v-model="form.adverseContent"></el-input>
          </el-form-item>

        </el-col>
        <el-col :lg="12" :xl="12">
          <el-form-item label="此次随访分类">
            <el-select v-model="form.TheRandom" style="width: 100%">
              <el-option
                v-for="item in TheRandom"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>



      </el-row>












      <el-row :gutter="20">



        <el-col :lg="12" :xl="12">
          <el-form-item label="用药情况">
            <HButton @click="addStroke()" type="add" size="mini">用药</HButton>
          </el-form-item>

          <el-table class="mt-20" :data="stroke" border stripe v-if="stroke.length>0">

            <el-table-column prop="strokeName" label="药物名称"  align="center">
            </el-table-column>
            <el-table-column prop="strokeEveryday" label="每日/次" align="center">
            </el-table-column>
            <el-table-column prop="strokeEveryTime" label="每次" align="center"> </el-table-column>


            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <HButton
                  @click="delStroke(scope.$index)"
                  type="delete"
                  size="mini"
                >删除</HButton
                >
              </template>
            </el-table-column>
          </el-table>

        </el-col>


        <el-col :lg="12" :xl="12">
          <el-form-item label="康复治疗方式">

            <el-select v-model="form.Special" style="width: 100%" multiple @change="seChangeSpecial">
              <el-option
                v-for="item in Special"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="康复治疗方式" v-if="showSpecial">
            <el-input v-model="form.SpecialContent"></el-input>
          </el-form-item>


        </el-col>

      </el-row>




      <el-row :gutter="20">




        <el-col :lg="12" :xl="12">
          <el-form-item label="肢体功能恢复情况">
            <el-select v-model="form.therapeutic" style="width: 100%">
              <el-option
                v-for="item in therapeutic"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生建议">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>

      </el-row>



      <el-row :gutter="20">


        <el-col :lg="12" :xl="12">
          <el-form-item label="下次随访日期">
            <el-date-picker
              v-model="form.nextfollowDate"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生">
            <el-input v-model="form.followDoctor"></el-input>
          </el-form-item>
        </el-col>

      </el-row>





      <el-row :gutter="20">

        <el-col :lg="12" :xl="12">
          <el-form-item label="随访医生签名">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove"
              :on-change="onprogress"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed"
              :file-list="fileList"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>




        <el-col :lg="12" :xl="12">
          <el-form-item label="现场图片">
            <el-upload
              class="upload-demo"
              action=""
              list-type="picture-card"
              :before-remove="beforeRemove2"
              :on-change="onprogress2"
              accept=".jpg,.png,"
              :multiple="false"
              :limit="1"
              :on-exceed="onExceed2"
              :file-list="fileList2"
              :auto-upload="false"
            >
              <em class="el-icon-plus"></em>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row type="flex" class="submitSty">
        <HButton type="add" @click="submit">提交</HButton>
      </el-row>
    </el-form>
    <strokeAdd ref="strokeAdd" @transData="strokeAdd"></strokeAdd>
  </div>
</template>

<script>
  import {
    selfCare,
    personal,
    location,
    StrokeType,
    Special,
    therapeutic,
    TheRandom,
    medication,
    adverse,
    coronaryType,
    Hypoglycemic,
    weakenSelect,
    acrotarsium,
    classification,
    classify,
    measure,
    dependence,
    badness,
  psychological,
  behavior,
  assimilateTarget,
  assimilate,
  kindergarten,
  organization,
  development,
  stoop,
  hearing,
  monthAge,
  Complexion,
  skin,
  neck,
  eye,
  umbilicus,
  twoFollow,
  guidance,
  result,
} from "@/api/followForms/stroke";
import { add } from '@/api/formData';
import strokeAdd from "./components/stroke-add";

export default {
  components: { strokeAdd},
  data() {
    return {
      showSpecial:false,
      stroke:[],
      showTherapeutic:false,
      showCoronaryType:false,
      coronary:[],
      diabetesOpinion:[],
      diabetes:[],
      showKindergarten:false,
      form: {
        ifReferral: 1,
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      twoFollowArr: [],
      guidanceArr: [],
      selfCare:selfCare,
      personal:personal,
      location:location,
      StrokeType:StrokeType,
      adverse:adverse,
      Special:Special,
      therapeutic:therapeutic,
      TheRandom:TheRandom,
      medication:medication,
      coronaryType:coronaryType,
      Hypoglycemic:Hypoglycemic,
      weakenSelect:weakenSelect,
      acrotarsium:acrotarsium,
      classification:classification,
      classify:classify,
      measure:measure,
      dependence:dependence,
      badness:badness,
      psychological:psychological,
      behavior:behavior,
      assimilateTarget:assimilateTarget,
      assimilate:assimilate,
      kindergarten:kindergarten,
      organization:organization,
      hearing:hearing,
      stoop:stoop,
      monthAge: monthAge,
      Complexion: Complexion,
      skin: skin,
      neck: neck,
      eye: eye,
      umbilicus: umbilicus,
      twoFollow: twoFollow,
      guidance: guidance,
      result: result,
      development:development
    };
  },
  created() {},
  methods: {
    submit() {
      var json = 	JSON.stringify(this.form)
      var data = {
        "id":this.form.id,
        "type":"CH42",
        "otherData":json
      }
      add(data).then(res=>{
        if (res.code == 'AA000000') {
          this.$message.success('提交成功')
        }
      })
    },





    delStroke(index) {
      this.stroke.splice(index, 1);
    },
    addStroke(){
      this.$refs.strokeAdd.openDialog();
    },
    strokeAdd(form) {
      this.stroke.push(JSON.parse(JSON.stringify(form)));
    },
    seChangekindergarten(value){
      this.form.kindergarten=value
      this.form.kindergarten.forEach(item =>{
        if(item ==1){
        }
        if(item == 6){
          this.showKindergarten=true
        }

      })
    },


    seChangeSpecial(value){
      this.form.Special=value
      this.form.Special.forEach(item =>{
        if(item ==1){
        }
        if(item == 5){
          this.showSpecial=true
        }

      })
    },


    seChangetherapeutic(value){
      this.form.therapeutic=value
      this.form.therapeutic.forEach(item =>{
        if(item ==1){
        }
        if(item == 10){
          this.showTherapeutic=true
        }

      })
    },

    seChangecoronaryType(value){
      this.form.coronaryType=value
      this.form.coronaryType.forEach(item =>{
        if(item == 6){
          this.showCoronaryType=true
        }

      })
    },
    //多选封装
    select(value, options) {
      if (!(value.indexOf(1) == -1)) {
        options.forEach((e) => {
          if (e.id != 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      } else if (value.length == 0) {
        options.forEach((e) => {
          e.isDisabled = false;
        });
      } else {
        options.forEach((e) => {
          if (e.id == 1) {
            e.isDisabled = true;
          } else {
            e.isDisabled = false;
          }
        });
      }
    },
    //两次随访间患病情况选择
    seChange1(value) {
      this.form.twoFollow = this.twoFollowArr.toString();
      this.select(value, this.twoFollow);
    },
    //指导选择
    seChange2(value) {
      this.form.guidance = this.guidanceArr.toString();
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress(file, fileList) {
      this.fileList = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove1(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress1(file, fileList) {
      this.fileList1 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed1() {
      this.$message.error("最多上传1个！");
    },
    beforeRemove2(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    onprogress2(file, fileList) {
      this.fileList2 = fileList;
      const fileSize = file.size / 1024 < 500;
      if (!fileSize) {
        this.$message.warning("不能超过500kb！");
        this.fileList.pop();
      }
    },
    onExceed2() {
      this.$message.error("最多上传1个！");
    },
  },
};
</script>

<style lang="less" scoped>
.spanSty {
  font-size: 30px;
  width: 900px;
  margin-bottom: 20px;
  margin-left: 30%;
}
.submitSty {
  float: right;
  margin-right: 45%;
}
</style>
